<template>
	<view class="shops">
		<text class="title">{{title}}</text>
		<!-- 商铺列表：点击跳转至详情页 -->
		<!-- <scroll-view scroll-y="true" class="scrollView"> -->
		<navigator class="love_item" v-for="shop in shops" :key="shop.id" :url="'/pages/detail/detail?id='+shop.id">
			<!-- 左侧图片 -->
			<view class="img_wrapper">
				<image :src="'cloud://cloud1-1gdhleslb36b813b.636c-cloud1-1gdhleslb36b813b-1305427833/'+shop.image_path"
					mode="aspectFit" class="love_image" />
			</view>
			<!-- 右侧文字内容 -->
			<view class="list_right">
				<view class="list_title">{{shop.title}}</view>
				<view class="list_price">
					<Star :score="shop.score" />
					<text class="text_price">￥{{shop.price}}</text>
				</view>
				<view class="list_local">
					{{shop.specific}}
				</view>
				<view class="list_tag" v-if="shop.labelArr">
					<text class="tag" v-for="(tag,index) in shop.labelArr" :key="index">
						{{tag}}
					</text>
				</view>
			</view>
		</navigator>
		<!-- </scroll-view> -->

		<view class="loading" v-show="loading">
			加载中 ... ...
		</view>
	</view>
</template>

<script>
	import Star from "./Star.vue"
	export default {
		name: "List",
		props: ['title', 'shops', 'loading'],
		components: {
			Star
		},
	}
</script>

<style>
	.shops {
		padding: 28rpx 28rpx 0 28rpx;
	}

	.scrollView {
		height: 800rpx;
	}

	.title {
		font-size: 30rpx;
		color: #7c7c7c;
	}

	.love_item {
		display: flex;
		flex-direction: row;
		min-height: 200rpx;
		border-bottom: 4rpx solid #f0f0f0;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		align-items: center;
		/* 子项在垂直方向上的对齐方式 */
	}

	.img_wrapper {
		width: 155rpx;
		height: 155rpx;
	}

	.love_image {
		width: 100%;
		height: 100%;
		border: 2rpx solid #f0f0f0;
	}

	.list_right {
		width: 539rpx;
		min-height: 160rpx;
		overflow: hidden;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list_title {
		font-weight: bold;
		font-size: 28rpx;
		overflow: hidden;
		height: 36rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list_price {
		display: flex;
		font-size: 20rpx;
	}

	.text_price {
		padding-left: 9rpx;
	}

	.list_local {
		font-size: 20rpx;
		color: #666666;
	}

	.list_tag {
		display: flex;
		flex-direction: row;
	}

	.tag {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		color: #333333;
		border: 1rpx solid #DDDDDD;
		border-radius: 6rpx;
		width: 108rpx;
		height: 41rpx;
		margin-right: 8rpx;
	}

	.loading {
		text-align: center;
		font-size: 24rpx;
		line-height: 70rpx;
	}
</style>
